<template>
  <div :class="['flex', { 'flex-col': align === 'vertical' }]">
    <router-link to="/" class="item">产品</router-link>
    <a
      href="https://www.yuque.com/u5018141/hgu6gd/xmfe2oz2otzp3grg#V3m2s"
      target="_blank"
      class="item"
      >社区</a
    >
    <router-link to="/study" class="item">学习</router-link>
    <router-link to="/about" class="item">关于</router-link>
  </div>
</template>

<script setup lang="ts">
defineProps({
  align: {
    // horizontal 水平的
    // vertical 垂直
    type: String as PropType<"vertical" | "horizontal">,
  },
});
</script>

<style scoped lang="scss">
// method1 使用transformer
.item {
  @apply relative text-white text-xl px-8 py-2 font-300 lt-sm:self-start;

  &:hover {
    @apply font-500;

    &:after {
      @apply content-empty absolute bg-gray-100 w-8 h-[2px] bottom-0 left-[calc(50%-1rem)];
      // h-[2px] 是属于自定义属性
    }
  }
}
</style>
